<template>
<el-row
    type="flex"
    justify="space-between"
    align="middle"
    style="height: 40px; width: 100%"
>
    <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
    <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   treeData 每个节点的数据对象-->

    <!-- 左侧内容 -->
    <el-col>
        <span>{{ treeData.name }}</span>
    </el-col>
    <!-- 右侧内容 -->
    <el-col :span="6">
        <el-row type="flex">
            <el-col><span>{{ treeData.manager }}</span></el-col>
            <el-col>
                <el-dropdown trigger="click" @command="handleDepartments" @click.stop.native>
                    <span class="el-dropdown-link">
                        {{ set }}
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="add">添加部门</el-dropdown-item>
                        <el-dropdown-item v-if="!isRoot" divided command="update">编辑部门</el-dropdown-item>
                        <el-dropdown-item v-if="!isRoot" divided command="delete">删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
    </el-col>
</el-row>
</template>

<script>
import { removeDepartmentsById } from '@/api/departments.js'
export default {
	props: {
		treeNode: Object,
		treeData: {
			type: Object,
			required: true
		},
		set: {
			type: String,
			default: '编辑'
		},
		isRoot: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		remove(node, data) {
			const parent = node.parent
			const children = parent.data.children || parent.data
			const index = children.findIndex(d => d.id === data.id)
			children.splice(index, 1)
		},
		handleDepartments(type) {
			console.log(type)
			if (type === 'add') {
				// 添加部门
				this.treeNode ? this.$emit('addDepts', this.treeNode) : this.$emit('addDepts')
			} else if (type === 'update') {
				// 编辑部门
				this.treeNode ? this.$emit('updateDepts', this.treeNode) : this.$emit('updateDepts')
			} else {
				// 删除部门
				this.$confirm('确定要删除该部门吗？')
					.then((res) => {
						// 调用接口，返回一个promise
						return removeDepartmentsById(this.treeData.id)
					})
					.then(() => {
						this.remove(this.treeNode, this.treeData)
						console.log('删除成功！')
					})
					// .catch(e => {
					// 	console.log(e)
					// })
			}
		}
	}
}
</script>

<style>
</style>
